<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>修改密码</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
    <style>
        * {
            margin: 0px;
        }

        .el-header {
            /*background-color: #B3C0D1;*/
            background-color: #99CCCC;
            color: #333;
        }

        .el-aside {
            /*#D3DCE6;*/
            background-color: #545c64;
            color: #333;
            text-align: center;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            height: 880px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        .asideModel {
            height: 160px;
        }

        a {
            text-decoration: none;
        }

        .logoImg {
            float: left;
            width: 180px;
            height: 90px;
            margin: 30px 30px 10px 30px;
            opacity: 0.85;
        }

        .mainBtn123 {
            /*float: left;*/
            width: 180px;
            height: 40px;
            margin: 0px 30px 30px 30px;
        }

        .link {
            margin: 10px 0px 0px 0px;
            height: 50px;
        }

        .changespan {
            text-align: right;
            margin-right: -20px;
        }

        .outspan {
            text-align: right;
            padding-right: 20px;
        }

        .headImg {
            float: right;
            border: 2px solid lightslategray;
            margin-top: 10px;
            margin-right: 10px;
        }

        .username {
            float: right;
            line-height: 70px;
        }

        .el-tabs--border-card {
            height: 100%;
        }

        .el-submenu .el-menu-item {
            color: #99CCCC !important;
        }

        .el-menu-item.is-active {
            color: #ffd04b !important;
        }
        .el-input {
            position: relative;
            font-size: 14px;
            display: inline-block;
            width: 100%;
        }
        .el-tabs__content{
            margin: 100px auto;
            width: 600px;
            position: center;
        }


    </style>
</head>
<body>
<div id="mydiv">
    <el-container>
        <el-aside width="240px">
            <!--系统名称和logo-->
            <div class="titleHead"><img class="logoImg" src="/secondStage/img/logo333.png"/>
                <a href="/secondStage/main.html"><el-button type="primary" icon="el-icon-s-home" class="mainBtn123">首 页</el-button></a>
            </div>
            <el-row class="tac">
                <el-col :span="24">
                    <el-menu default-active="101" class="el-menu-vertical-demo" @open="handleOpen"
                             @close="handleClose"
                             background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                        <el-submenu :index="menus.pid" v-for="menus in usermenus">
                            <template slot="title">
                                <i :class="menus.glyphicon"></i>
                                <span>{{menus.pname}}</span>
                            </template>
                            <el-menu-item-group v-for="menu in menus.menuList">
                                <a :href="menu.url">
                                    <el-menu-item :index="menu.pid">
                                        <i :class="menu.glyphicon"></i>
                                        {{menu.pname}}
                                    </el-menu-item>
                                </a>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-col>
            </el-row>

        </el-aside>
        <el-container>
            <el-header style="height: 60px">
                <el-row>
                    <!--头像-->
                    <el-col :span="5" :offset="15">
                        <span class="username">欢迎您：<strong>{{username}}</strong></span>
                        <el-avatar :size="45" :src="circleUrl" class="headImg"></el-avatar>
                    </el-col>
                    <el-col :span="2" class="changespan">
                        <el-link href="/secondStage/html/alterPassword.html" icon="el-icon-edit" class="link">修改密码
                        </el-link>
                    </el-col>
                    <el-col :span="2" class="outspan">
                        <el-link @click="islogout" icon="el-icon-switch-button" class="link">退出登录</el-link>
                    </el-col>

                </el-row>

            </el-header>
            <el-main>
                <!--导航栏-->
                <el-tabs type="border-card" v-model="activeName">
                    <el-tab-pane label="首页" disabled></el-tab-pane>
                    <el-tab-pane label="修改密码" name="alterPassword">
                        <!--修改密码的表单,定义了一个局部组件-->
                        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="150px"
                                 class="demo-ruleForm">
                            <el-form-item label="请输入旧密码" prop="pass">
                                <el-input type="password" v-model="ruleForm.pass"></el-input>
                            </el-form-item>
                            <el-form-item label="请输入新密码" prop="newPass">
                                <el-input type="password" v-model="ruleForm.newPass"></el-input>
                            </el-form-item>
                            <el-form-item label="确认新密码" prop="checkPass">
                                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                                <el-button @click="resetForm('ruleForm')">重置</el-button>
                            </el-form-item>
                        </el-form>


                    </el-tab-pane>
                </el-tabs>

            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script type="text/javascript">
    var myVue = new Vue({
        el: "#mydiv",
        data() {
            var checkOldPass = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('密码不能为空'));
                }
                setTimeout(() => {
                    axios.post('/secondStage/login',"method=chargePwd&pwd="+value)
                        .then(response => {
                            console.log(response);
                            if (response.data.returnCode == 200) {
                                callback();
                            }else {
                                callback(new Error('密码输入有误'));
                            }
                        }).catch(function (error) {
                        console.log(error);
                    });
                }, 500);
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新密码'));
                } else {
                    let reg = /[0-9a-zA-z_]{6,12}/
                    if (!reg.test(value)) {
                        callback(new Error('新密码应是6-12位数字、字母或字符！'));
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入新密码'));
                } else if (value !== this.ruleForm.newPass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                usermenus: "",
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                username: "",
                activeName: "alterPassword",
                oldPass: "",
                aid:"",
                ruleForm: {
                    pass: '',
                    newPass: '',
                    checkPass: ''
                },
                rules: {
                    pass: [
                        {validator: checkOldPass, required: true, trigger: 'blur'}
                    ],
                    newPass: [
                        {validator: validatePass, required: true, trigger: 'blur'}
                    ],
                    checkPass: [
                        {validator: validatePass2, required: true, trigger: 'blur'}
                    ]
                }
            }
        },

        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            islogout() {
                this.$confirm('此操作将退出系统, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    location.href = "/secondStage/login?method=logout";
                });
            },
            alterPassSuccess() {
                this.$alert('密码修改成功，请妥善保管。将重新登陆，点击继续', {
                    confirmButtonText: '确定',
                    type: 'success',
                    callback: action => {
                        location.href = "/secondStage/login.html";
                    }
                });
            },
            alterPassError() {
                this.$alert('密码修改失败，请重试或联系管理员。', {
                    confirmButtonText: '确定',
                    type: 'error'
                });
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var submit = window.Qs.stringify(this.ruleForm)+"&method=alterPassword&aid="+this.aid;
                        console.log(submit);
                        axios.post('/secondStage/editAdmin',submit)
                            .then(response => {
                                console.log(response);
                                if (response.data.returnCode == 200) {
                                    this.alterPassSuccess();
                                }else {
                                    this.alterPassError();
                                }
                            }).catch(function (error) {
                            console.log(error);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        created() {
            axios.post('/secondStage/showMenu', 'method=getMenu')
                .then(response => {
                    console.log(response);
                    if (response.data.returnCode == 200) {
                        this.usermenus = response.data.returnData;
                        this.circleUrl = "/secondStage/" + response.data.returnAccount.aimg;
                        this.username = response.data.returnAccount.aname;
                        this.oldPass = response.data.returnAccount.apwd;
                        this.aid = response.data.returnAccount.aid;
                    }
                }).catch(function (error) {
                console.log(error);
            });
        }
    });
</script>
</html>
